<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table 表格</title>
    <!-- 引入代码块样式 -->
    <link rel="stylesheet" href="../../css/code_black.css"/>
    <!-- 引入表格样式 -->
    <!--<link rel="stylesheet" href="../../css/table_style.css" />-->

    <!-- 给 table 第1列自动排序号, <table class="num_auto_increase" -->
    <script type="text/javascript" src="../../js/table_num_auto_increase.js"></script>
</head>

<body>
<font color="red" size="7">&lt;table> 表格布局</font><br />

<div class="code_block">
    在实际开发中,
    <font color="red">div + css</font> 布局非常常见, 但对于更熟悉服务器程序的Java程序员来说,
    没有相应的知识底蕴, ∴我们这儿用&lt;table> <br />

    <br />
    <font color="red">&lt;table></font>里面嵌套 <br />
    &emsp; <font color="red">&lt;tr></font>(行) <br />
    &emsp; &emsp; <font color="red">&lt;th></font>(细胞, 放在tr里面的) [应该是表格的第一行标题栏?] <br />
    &emsp; &emsp; <font color="red">&lt;td></font>(细胞, 放在tr里面的)
</div>

<br />
<h2>&lt;table 属性说明:</h2>
<table class="num_auto_increase">
    <tr>
        <th>序号</th>
        <th>属性</th>
        <th>说明</th>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">border</font>="1px"</td>
        <td>边框</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">bordercolor</font>="red"</td>
        <td>边框颜色</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">bgcolor</font>="pink"</td>
        <td>背景颜色</td>
    </tr>
    <tr>
        <td></td>
        <td>
            <font color="red">width</font>="300px" <br />
            <font color="red">height</font>="150px"
        </td>
        <td>宽高属性</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">background</font>="../img/big01.jpg"</td>
        <td>背景图片, 设置这个属性后bgcolor属性无效</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">align</font>="center"</td>
        <td>整个表格的显示位置, center:居中</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">cellspacing</font>="0px"</td>
        <td>单元格之间的间距(如果不去掉会有空白间距)</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">cellpadding</font>="0px"</td>
        <td>单元格里内容与边框的距离</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">height</font>="100px"</td>
        <td>这一行的高度</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">bgcolor</font>="gold"</td>
        <td>背景颜色</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">background</font>="../img/logo2.png"</td>
        <td>背景图片. 如果设置了bgcolor, 会和bgcolor一起显示</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">nowrap</font>="nowrap"</td>
        <td>不换行, 过长的不会显示</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">align</font>="center"</td>
        <td>每一个细胞内容的位置, center:居中</td>
    </tr>
</table>

<br />
<h2>&lt;td 属性说明:</h2>
<table class="num_auto_increase">
    <tr>
        <th>序号</th>
        <th>属性</th>
        <th>说明</th>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">bgcolor</font>="gold"</td>
        <td>背景颜色</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">background</font>="../img/small07.jpg"</td>
        <td>背景图片, 设置这个后bgcolor属性无效</td>
    </tr>
    <tr>
        <td></td>
        <td><font color="red">align</font>="left"</td>
        <td>细胞内容的位置, left:居左</td>
    </tr>
</table>



<br />
<h2>table使用示例:</h2>
<!--------------------------------------------------------12-------------------------------------------------------->
<table border="1px" bordercolor="red" bgcolor="pink" width="300px" height="150px"
       background="http://img00.hc360.com/cloth/201205/201205081144039515.jpg"
       align="center" cellspacing="0px">

    <!--https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=158270361,3208955113&fm=55&s=D7AAB945422254B05F0D29E2030060B3&w=121&h=81&img.JPEG-->
    <tr height="100px" bgcolor="gold" align="center"
        background="//inews.gtimg.com/newsapp_bt/0/2840833340/641">
        <td>1行1列</td>
        <td>1行2列</td>
        <td>1行3列</td>
    </tr>
    <tr>
        <td>2行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
    </tr>
    <tr align="right">
        <td bgcolor="gold" align="left"
            background="https://ss0.baidu.com/73x1bjeh1BF3odCf/it/u=2624712571,1396361880&fm=85&s=86A095097AB27B90052C91DE0300F0A3">3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
    </tr>
</table>


<br />

<p>&lt;td>的
    <font color="red">colspan</font>="2" 跨列,把1行2列注释掉,否则会多出一列.</p>
<table width="400px" height="200px" align="center" border="1px" cellspacing="0px">
    <tr align="center">
        <td colspan="2">1行1列</td>
        <td>1行2列</td>
        <td>1行3列</td>
        <td>1行4列</td>
    </tr>
    <tr align="center">
        <td>2行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
        <td>2行4列</td>
    </tr>
    <tr align="center">
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
        <td>3行4列</td>
    </tr>
    <tr align="center">
        <td>4行1列</td>
        <td>4行2列</td>
        <td>4行3列</td>
        <td>4行4列</td>
    </tr>
</table>

<p>&lt;td>的
    <font color="red">rowspan</font>="2" 跨行,把3行1列注释掉,否则会多出一列.</p>
<table width="400px" height="200px" align="center" border="1px" cellspacing="0px">
    <tr align="center">
        <td>1行1列</td>
        <td>1行2列</td>
        <td>1行3列</td>
        <td>1行4列</td>
    </tr>
    <tr align="center">
        <td rowspan="2">2行1列</td>
        <td>2行2列</td>
        <td>2行3列</td>
        <td>2行4列</td>
    </tr>
    <tr align="center">
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
        <td>3行4列</td>
    </tr>
    <tr align="center">
        <td>4行1列</td>
        <td>4行2列</td>
        <td>4行3列</td>
        <td>4行4列</td>
    </tr>
</table>

<p>&lt;td>的
    <font color="red">colspan &amp; rowspan</font>都="2" 跨行&amp;跨列,效果如下</p>
<table width="400px" height="200px" align="center" border="1px" cellspacing="0px">
    <tr align="center">
        <td>1行1列</td>
        <td>1行2列</td>
        <td>1行3列</td>
        <td>1行4列</td>
    </tr>
    <tr align="center">
        <td>2行1列</td>
        <td colspan="2" rowspan="2">2行2列</td>
        <td>2行3列</td>
        <td>2行4列</td>
    </tr>
    <tr align="center">
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
        <td>3行4列</td>
    </tr>
    <tr align="center">
        <td>4行1列</td>
        <td>4行2列</td>
        <td>4行3列</td>
        <td>4行4列</td>
    </tr>
</table>

<p>&lt;td>的
    <font color="red">colspan &amp; rowspan</font>都="2" 跨行&amp;跨列,效果如下</p>
<p>里面表&lt;table>
    <font color="red">width</font>="100%"
    <font color="red">height</font>="100%"</p>
<table width="400px" height="200px" align="center" border="1px" cellspacing="0px" cellpadding="0px">
    <tr align="center">
        <td>1行1列</td>
        <td>1行2列</td>
        <td>1行3列</td>
        <td>1行4列</td>
    </tr>
    <tr align="center">
        <td>2行1列</td>
        <td colspan="2" rowspan="2" align="center">
            <table border="1px" cellspacing="0px" cellpadding="0px" width="100%" height="100%">
                <tr align="center">
                    <td>11</td>
                    <td>12</td>
                    <td>13</td>
                </tr>
                <tr align="center">
                    <td>21</td>
                    <td>22</td>
                    <td>23</td>
                </tr>
                <tr align="center">
                    <td>31</td>
                    <td>32</td>
                    <td>33</td>
                </tr>
            </table>
        </td>
        <td>2行3列</td>
        <td>2行4列</td>
    </tr>
    <tr align="center">
        <td>3行1列</td>
        <td>3行2列</td>
        <td>3行3列</td>
        <td>3行4列</td>
    </tr>
    <tr align="center">
        <td>4行1列</td>
        <td>4行2列</td>
        <td>4行3列</td>
        <td>4行4列</td>
    </tr>
</table>




<hr size="1" />
<!--------------------------------------------------------12-------------------------------------------------------->

<li><font color="red" size="7">用表格写一个购物商城
    <a href="2.黑马商城.html" target="_blank">黑马商城</a>
</font>
</li>

</body>
</html>